<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>个人信息</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script src="/js/common/common.js"></script>
<link href="/css/common/common.css" rel="stylesheet" type="text/css">
<style type="text/css">
.personal-info-form {
	padding-left: 3rem;
	padding-top: 3rem;
}

.personal-info-form .row {
	padding-bottom: 1rem;
}

.personal-info-form-item label {
	text-align: end;
	width: 5rem;
	margin-right: 1rem;
}

.personal-info-form-item input {
	border: 0;
	outline: none;
	border-bottom: 1px solid #35a79c;
}
</style>
</head>

<body>
	<div th:replace="common/header::html"></div>
	<div id="withdraw" v-cloak>
		<div class="page-body">
			<div class="personal-info-form">
				<div class="row">
					<div class="col-sm-9 offset-sm-3 personal-info-form-item">
						<label>用户名</label> <span>{{bankInfo.openAccountBank}}</span>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-9 offset-sm-3 personal-info-form-item personal-info-form-highlight-item">
						<label>开户人姓名</label> <span>{{bankInfo.accountHolder}}</span>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-9 offset-sm-3 personal-info-form-item personal-info-form-highlight-item">
						<label>银行卡账号</label> <span>{{bankInfo.bankCardAccount}}</span>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-9 offset-sm-3 personal-info-form-item personal-info-form-highlight-item">
						<label>可用余额</label> <span>{{balance}}</span>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-9 offset-sm-3 personal-info-form-item">
						<label>提现金额</label> <span><input type="number" class="" v-model="withdrawAmount"></span>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-9 offset-sm-3 personal-info-form-item">
						<label>资金密码</label> <span><input type="password" class="" v-model="moneyPwd"></span>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-9 offset-sm-3">
						<div class="alert alert-light" style="font-size: 14px; padding-top: 0px;">提款下限，10元/次;单笔上限999999999999999元，单日限额1000000元，单日提现次数限制5次</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6" style="margin-left: 4rem;">
						<button type="button" class="btn btn-success btn-lg" v-on:click="confirmWithdraw">确认提现</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var withdrawVM = new Vue({
			el : '#withdraw',
			data : {
				bankInfo : '',
				balance : '',
				withdrawAmount : '',
				moneyPwd : ''
			},
			computed : {},
			created : function() {
			},
			mounted : function() {
				headerVM.title = '提现';
				headerVM.showBackFlag = true;
				this.loadBankInfo();
				this.getUserAccountInfo();

			},
			methods : {
				loadBankInfo : function() {
					var that = this;
					that.$http.get('/userAccount/getBankInfo').then(function(res) {
						that.bankInfo = res.body.data;
					});
				},

				/**
				 * 获取用户账号信息
				 */
				getUserAccountInfo : function() {
					var that = this;
					that.$http.get('/userAccount/getUserAccountInfo').then(function(res) {
						if (res.body.data != null) {
							that.balance = res.body.data.balance;
						}
					});
				},

				confirmWithdraw : function() {
					var that = this;
					if (that.withdrawAmount == null || that.withdrawAmount == '') {
						layer.alert('请输入提现金额');
						return;
					}
					if (that.moneyPwd == null || that.moneyPwd == '') {
						layer.alert('请输入资金密码');
						return;
					}
					that.$http.post('/withdraw/startWithdraw', {
						withdrawAmount : that.withdrawAmount,
						moneyPwd : that.moneyPwd
					}, {
						emulateJSON : true
					}).then(function(res) {
						layer.open({
							title : '提示',
							icon : '1',
							closeBtn : 0,
							btn : [],
							content : '已发起提现请求,系统审核通过后会马上为您出款!',
							time : 2000,
							end : function() {
								window.location.reload();
							}
						});
					});
				}
			}
		});
	</script>
</body>
</html>